@import './common';
@import './reset';
page{
    background:#F4F6FA;font-size:30rpx;
}
.popup-swiper{
    background-color: transparent;
    .u-mode-center-box{
        background-color: transparent!important;
    }
    .transparent-swiper{
        swiper{
            background-color: transparent!important;
        }
    }
}
.search-sticky{
    background:#fff;padding:20rpx 0;
    .current{
        // color:$cyan;font-weight:bold;
        font-weight:bold;font-size:34rpx;position: relative;
        .name{position: relative;z-index:2;}
        &::after{
            content:'';position:absolute;left:0;bottom:0;z-index:1;width:100%;height:24rpx;background:$cyan;
        }
    }

}
.page-register-index{
    height: 100%;background:#fff;
    .avatar{
        border:none;
        &::after{
            background:none;border:none;
        }
    }
    .phone{
        border:none;background:none;padding:0;font-size:30rpx;color:#888;height:44rpx;line-height: 44rpx;float:left;
    }
    .card{
        background:$lightOrange;border:1rpx solid $orange;text-align:center;margin:30rpx 0;padding:30rpx;border-radius:8rpx;
        .price{color:$red;font-weight:bold;font-size:34rpx;}
        .day{color:$grey6;font-size:26rpx;}
    }
    .tips{
        color:$grey9;
    }

}
.page-home-index{
    .bg{
        height:378rpx;background: linear-gradient( 3deg, rgba(242,253,254,0) 0%, #F5FFF4 17%, #F7F9EA 64%, #DAFDEF 100%);
    }
    .search-bar{
        align-items:center;padding:30rpx 32rpx 0 32rpx;
        .city{
            display: flex;align-items: center;
        }
        .input{
            height:60rpx;background:#fff;border-radius: 160rpx 160rpx 160rpx 160rpx;padding:0 30rpx;line-height:60rpx;display: flex;justify-content: space-between;align-items:center;
            text{color:$grey9}
        }
    }
    .my-tabs{
        .scroll-block{
            white-space: nowrap;width:100%;scrollbar-width: none; 
            &::-webkit-scrollbar {
                display: none !important;
            }
            .item{padding:10rpx 0;margin:0 30rpx;display: inline-block;font-size:30rpx;}
            .current{font-weight:bold;font-size:34rpx;position: relative;
                .name{position: relative;z-index:2;}
                &::after{
                    content:'';position:absolute;left:0;bottom:0;z-index:1;width:100%;height:24rpx;background:#67E5C2;
                }
            }
        }
    }
    .list{margin-bottom:30rpx;}
    .fly-card{
        margin: 0 30rpx;
        .item{
            margin-top:30rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;
        }
        .thumb{
            width:204rpx;height:270rpx;
        }
        .content{
            &::after{display: none;}
        }
        .desc{
            line-height:48rpx;font-size:30rpx;
            .c-black{color:#333;}
        }
        .grey9{
            color:$grey9;font-size:26rpx;
        }
        
    }
}
.page-history{
    &-index{
        .my-tabs{background:#fff;padding-bottom:20rpx;box-shadow: 10rpx 0rpx 10rpx rgba(0,0,0,0.1);}
    }
}
.activity-tag-{
    &0{
        @extend .tag-cyan;
    }
    &1{
        @extend .tag-purple;
    }
    &2{
        @extend .tag-blue;
    }
    &3{
        @extend .tag-orange;
    }
}
.page-online-index{
    .bg{
        background: linear-gradient( 3deg, #F4F6FA 0%, rgba(220,243,243,0.2) 14%, #D3FAF8 44%, #DAF4FD 100%);
    }
}
.page-login{
    &-phone{
        .bg{
            padding:100rpx 0;background: linear-gradient( 3deg, rgba(242,253,254,0) 0%, #F5FFF4 17%, #F7F9EA 64%, #DAFDEF 100%);
            text-align:center;
            u-image{display: inline-block;}
            .name{
                padding-top:40rpx;font-weight:bold;font-size:48rpx;color:$deepCyan;
            }
            .subtitle{
                padding-top: 10rpx;font-size:30rpx;
            }
        }
    }
}
.page-account{
    &-info{
        height:100%;background:#fff;
        .avatar{
            border:none;
            &::after{
                background:none;border:none;
            }
        }
        .u-form-item--left__content__label{color:$grey9;}
    }
    &-bind{
        height:100%;background:#fff;
    }
}
.page-activity{
    &-list{
        .search-sticky{padding:20rpx 30rpx;align-items: center;
            .uicon-arrow-down-fill{top:-4rpx !important;}
        }
    }
    &-history{
        .search-sticky{padding:20rpx 30rpx;align-items: center;
            .uicon-arrow-down-fill{top:-4rpx !important;}
        }
        .total{
            padding-top:30rpx;color:$deepCyan;text-align:center;font-weight:bold;
            .num{font-size:42rpx;font-weight:bold;border-bottom:4rpx solid $orange;}
        }
        .list{
            margin:0 30rpx;
            .item{margin-top:40rpx;}
            .hd{
                border-radius:12rpx 12rpx 0 0;overflow:hidden;
            }
            .bd{
                background:#fff;padding:20rpx 30rpx;border-radius:0 0 12rpx 12rpx;
                .title{font-size:34rpx;}
                .c-grey9{margin-top:10rpx;}
            }
        }
    }
    &-manage{
        .form-block{
            .u-form-item--left__content__label{font-weight:bold;}
        }
    }
    &-detail{
        .banner{
            position: relative;z-index:1;
            .tips{position: absolute;bottom:20rpx;right:20rpx;right:right;z-index:2;background:rgba(0,0,0,0.1);padding:8rpx 16rpx;border-radius: 60rpx;font-size:24rpx;color:#fff;}
        }
        .info.fly-card{
            background:#fff;padding:32rpx 0;
            .title{font-size:44rpx;}
            .desc{
                line-height:48rpx;font-size:30rpx;
                .flex-between{
                    align-items: center;
                }
            }
        }
        .sign{
            padding:32rpx;margin-bottom:16rpx;background:#fff;
            .flex-between{align-items: center;margin-bottom:30rpx;}
            .flex-block{align-items:center;}
            .title{font-size:34rpx;font-weight:bold;}
            .num{font-size:30rpx;}

            .intro{line-height: 48rpx;}
            .fly-title{
                font-size:30rpx;
                border:none;
                &::after{
                    display: none;
                }
            }
        }
        .scroll{
            white-space: nowrap;
		    width: 100%;
            .item{
                display: inline-block;
                width: 90rpx;
                height: 200rpx;
                overflow: hidden;
                text-align: center;
                font-size: 26rpx;
                position: relative;
                &+.item{margin-left:30rpx;}
                .host-icon{
                    position: absolute;top:0;left:0;z-index:99;color:$deepCyan;
                }
            }
        }
        .tab{
            background:#fff;
            .u-tabs,.u-tabs-scroll-flex,.u-tabs-scroll-flex,.u-scroll-view,.u-tab-item{
                border:none;
                &::before,&::after{display:none;}                
            }
        }
        .tab-content{
            margin:0 30rpx;padding:30rpx 0;background:#fff;position:relative;z-index:9;
            .tab{
                &-1{
                    .u-cell{padding-left:0!important;padding-right:0!important;}
                }
                &-2{
                    line-height: 48rpx;
                }
            }
            .fly-title{
                font-size:30rpx;
                border:none;
                &::after{
                    display: none;
                }
            }
            .fly-card{
                .item{padding-left:0;padding-right:0;}
                .thumb{
                    width:48rpx;height:48rpx;
                }
                .title{
                    font-size:26rpx;color:$grey9;margin-bottom:20rpx;
                }
                .desc{
                    color:$grey6;font-size:26rpx;
                }
                .date{
                    font-size:24rpx;color:$grey9;margin-top:10rpx;
                }
            }
        }
        .fly-bottom-bar{
            padding-top:200rpx;
            .content{
                padding:20rpx 30rpx;border-top:1rpx solid $border-color;
            }
            .fl{
                text-align:center;color:$grey9;font-size:26rpx;
                .icon-share{padding-right:20rpx;position:relative;
                    .btn-share{position: absolute;left:0;top:0;width:100%;height:100%;opacity: 0;z-index:99;}
                }
                .icon-alternate{padding:0 20rpx;}
                .icon-sign{padding:0 20rpx;}
                u-image{display:inline-block;}
            }
            .fr{
                border-radius:12rpx;overflow:hidden;
            }
            .btn{
                background:$lightCyan;color:$deepCyan;padding:16rpx 30rpx;box-sizing:border-box;width:230rpx;text-align:center;font-size:30rpx;line-height:54rpx;
                &.deepCyan{
                    background:$deepCyan;color:#fff;
                }
                &.grey{
                    background:$grey9;color:#fff;
                }
            }
        }
    }
}
.page-my{
    &-index{
        .fly-card{
            background: linear-gradient( 180deg, #F5FFFD 0%, #F4F6FA 100%);
            .item{background:none;}
            .thumb{
                height:120rpx;width:120rpx;
            }
            .content{
                .flex-between{align-items:center;}
                .title{
                    font-size:44rpx;font-weight:bold;
                }
                &::after{display: none;}
            }
            .banner{margin:0 30rpx;}
        }
        .intro{
            padding:0 30rpx 30rpx 30rpx;
        }
        .banner{
            position: relative;
            .btn-share{position: absolute;left:0;top:0;width:100%;height:100%;opacity: 0;z-index:2;}
        }
        .menu{
            background:#fff;border-radius:12rpx;overflow:hidden;
        }
        .nav{
            margin:0 -8rpx;
            .flex-between{
                background:#fff;border-radius:6rpx;overflow:hidden;margin-bottom:18rpx;padding:18rpx 30rpx;align-items: center;
                .title{
                    font-size: 30rpx;font-weight:bold;margin-left:20rpx;
                }
            }
        }
    }
}
.page-create{
    &-index{
        margin: 0 30rpx;
        .menu{
            margin:0 -8rpx;padding-top:30rpx;
            .text-center{
                padding:20rpx 0rpx;background:$lightCyan;color:$deepCyan;border-radius:12rpx;overflow:hidden;
                &.current{
                    background:$deepCyan;color:#fff;
                }
            }
        }
        .fly-title{margin:30rpx 0;font-size:34rpx;font-weight:bold;}
        .form-block{
            background:#fff;padding:0 30rpx;border-radius:12rpx;overflow: hidden;
        }
        .sign-tips{
            background:$lightCyan;color:$deepCyan;padding:18rpx;font-size:26rpx;border-radius:12rpx;margin-bottom:30rpx;
        }
        .fly-bottom-bar{
            height:200rpx;
            .content{
                bottom:calc(114rpx + var(--safe-area-inset-bottom));
                padding:20rpx 30rpx;shadow:0 0 8rpx rgba(0,0,0,0.3);
                .fl{
                    text-align: center;;width:160rpx;
                    u-image{display: inline-block;}
                }
                .fr{
                    flex:1;
                    .btn-deepCyan{width:100%;}
                }
            }
        }
    }
    &-draft{
        .fly-card{
            margin: 0 30rpx;
            .item{
                margin-top:30rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;
            }
            .thumb{
                width:204rpx;height:270rpx;
            }
            .content{
                &::after{display: none;}
            }
            .desc{
                line-height:48rpx;font-size:30rpx;
                .c-black{color:#333;}
            }
            .grey9{
                color:$grey9;font-size:26rpx;
            }
        }
    }
}
.page-community{
    &-index{
        .search-bar{
            align-items:center;padding:30rpx 32rpx 0 32rpx;
            .city{
                display: flex;align-items: center;
            }
            .input{
                height:60rpx;background:#fff;border:1rpx solid $cyan;border-radius: 160rpx 160rpx 160rpx 160rpx;padding:0 30rpx;line-height:60rpx;display: flex;justify-content: space-between;align-items:center;
                text{color:$grey9}
            }
        }
        .menu{
            margin:0 16rpx;padding:30rpx 0 60rpx 0;
            .content{
                padding:40rpx 30rpx;background:#333;color:#fff;border-radius:16rpx;overflow:hidden;
                .title{
                    font-size:34rpx;font-weight:bold;
                }
            }
        }
        .album{  
            margin:0 30rpx;          
            .item{
                display:flex;margin-bottom:30rpx;
                .title{font-size:34rpx;color:$deepCyan;font-weight:bold;margin-bottom:20rpx;}
                .content{position: relative;flex:1;}
                .text{
                    // max-height:300rpx;overflow:hidden;
                    color:#666;overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;
                }
                &+.item{
                    padding-top:30rpx;
                    .content{
                        &::before{
                            content:'';position:absolute;top:-30rpx;left:0;width: 100%;height:1rpx;background:$border-color;
                        }
                    }
                }
            }
            .avatar{margin-right:30rpx;}
            .name{font-size:34rpx;font-weight:bold;margin-bottom:20rpx;}
            .text{margin-bottom:20rpx;font-size: 30rpx;;}
            .imgs{
                padding-bottom:20rpx;
                .u-col{margin-top:8px;}
            }
            .activity-tag{
                .u-tag{display: block;}
            }
            .comment{
                display: flex;justify-content: space-between;align-items:center;margin-top:20rpx;color:$grey9;
                .time{font-size:26rpx;}
                .btns{
                    display: flex;
                    .btn-item{margin-left:30rpx;display: flex;align-items: center;}
                }
            }
        }
    }
}
.page-collect{
    &-list{
        .fly-panel{
            margin:30rpx 30rpx 0 30rpx;
            .hd,.ft{
                &::before,&::after{display:none;}
            }
            .hd{
                align-items: center;
                .name{margin-left:20rpx;font-weight:bold;}
            }
            .bd{
                margin:0 30rpx;padding:0;
            }
            .ft{
                padding:30rpx;
                .btn-item{display: flex;align-items: center;}
            }
        }
        .album {
            .item{
                padding: 30rpx;background:#fff;border-radius:16rpx;border:none;margin-top:30rpx;
                .content{
                    &::before{
                        display: none;
                    }
                }
            }
        }
    }
}
.page-city{
    &-list{
        .current{
            padding:30rpx 0;margin:0 30rpx;
            .title{margin-bottom:30rpx;font-size:30rpx;}
        }
    }
}
.page-creation{
    &-book{
        margin:0 30rpx;
        .submit-bar{
            padding-bottom:var(--safe-area-inset-bottom);
            .fl{
                text-align: center;;width:160rpx;
                u-image{display: inline-block;}
            }
            .fr{
                flex:1;
                // .btn-deepCyan{width:100%;height:80rpx;line-height:80rpx;text-align:center;color:#fff;background:$deepCyan;font-size:34rpx;border-radius:12rpx;}
                .u-btn{width:100%;}
            }
        }
    }
    &-draft{
        .search-sticky{padding:20rpx 30rpx;};
        .fly-card{
            margin:0 30rpx;
            .item{margin-top:30rpx;border-radius:12rpx;
                .content{margin:0 30rpx 0 0;}
                .title{height:84rpx;margin-bottom:40rpx;}

            }
        }
    }
    &-activity{
        .fly-card{
            margin: 0 30rpx;
            .item{margin-top:30rpx;border-radius:12rpx;
                .title{height:84rpx;margin-bottom:40rpx;}
            }
        }
    }
    &-detail{
        padding:30rpx 0;margin:0 30rpx;
        .article{
            .title{
                align-items: center;
            }
            .content{
                margin-top:40rpx;color:#666;
                .title{
                    font-size:34rpx;color:$deepCyan;font-weight:bold;
                }
                .contentHtml{line-height:48rpx;}
            }
            .imgs{
                padding-bottom:20rpx;
                .u-col{margin-top:8px;}
            }
            .activity-tag{
                .u-tag{display: block;}
            }
            .time{
                padding:30rpx 0;margin-bottom:30rpx;border-bottom: 1rpx solid $border-color;color:$grey9;font-size:26rpx;
            }
        }   

        .comment{
            .fly-card{
                .item{padding:20rpx 0;}
                .thumb{
                    width:48rpx;height:48rpx;
                }
                .sub-list{
                    border-top:1rpx solid $border-color;margin-top:20rpx;
                    .item{
                        padding-bottom:0;
                        .title{margin:0;}
                        .content{margin:0;}
                    }
                }
                .title{
                    font-size:26rpx;color:$grey6;margin-bottom:20rpx;
                }
                .content{margin-left:20rpx;}
                .desc{
                    color:$grey6;font-size:26rpx;
                }
                .date{
                    font-size:24rpx;color:$grey9;margin-top:10rpx;
                }
            }
        }
        
        .fly-bottom-bar{
            .content{border-top:1rpx solid $border-color;}
        }
        .function{
            display: flex;justify-content:space-between;align-items: center;padding:20rpx 30rpx;
            .input{
                width:300rpx;height:56rpx;border-radius:56rpx;background:$bg-color;color:$grey9;padding:0 30rpx;box-sizing: border-box;line-height: 56rpx;
            }
            .btns{
                display: flex;
                .btn-item{margin-left:30rpx;display: flex;align-items: center;}
            }
        }
    }
}

.page-invitation{
    &-list{
        .list{margin:0 30rpx;
            .fly-cell{margin-top:30rpx;border-radius:12rpx;
                .content{border:none;}
                .value{flex:none;}
            }
        }
        .btn-cyan{
            .u-btn{padding:0 40rpx;margin:0;float:right;}
        }
        .btn-red{
            .u-btn{display:inline-block;}
        }
    }
}
.page-branch{
    &-connect{
        height:100%;background: linear-gradient( 3deg, rgba(242,253,254,0) 0%, #F5FFF4 17%, #F7F9EA 64%, #DAFDEF 100%);
        text-align:center;
        .title{
            font-size:72rpx;font-weight:bold;color:$deepCyan;padding:40rpx 0 20rpx 0;
        }
        .sub-title{
            font-size:48rpx;font-weight:bold;color:$cyan;
        }
        .wxcode{
            margin:40rpx 0;
        }
        .tips{
            font-size:30rpx;line-height:42rpx;
        }
    }
    &-add{
        height:100%;
        .desc{
            line-height:48rpx;
            .mb-2{text-indent: 60rpx;}
        }
        .info{
            margin-top:30rpx;border-radius:12rpx;background:#fff;padding: 30rpx;
        }
        .content{
            padding:30rpx 0;
        }
        .status-{
            &1{color:$deepCyan;}
            &2{color:$red;}
            &0{color:$blue;}
        }
    }
    &-member{
        .list{
            // margin:0 30rpx;
            .role{
                font-size:24rpx;margin-left:20rpx;
            }
            .desc{
                font-size:24rpx;color:$grey9;
            }
            .status-{
                &0{color:$deepCyan;}
                &1{color:$red;}
                &2{color:$orange;}
            }
        }
    }
    &-audit{
        .status-{
            &0{color:$blue;}
            &1{color:$deepCyan;}
            &2{color:$red;}
        }
    }
}

.page-bolg{
    &-index{
        .bg{height:74rpx;background:#DAFDEF;padding:16rpx 30rpx 0rpx 30rpx;box-sizing: content-box;}
        .info{
            background: #fff;padding:20rpx 30rpx 30rpx 30rpx;border-radius:12rpx 12rpx 0 0;margin-bottom:20rpx;
            .thumb{margin-top:-80rpx;margin-right:30rpx;padding:8rpx;border-radius:50%;background:#fff;}
            .name{font-size:44rpx;font-weight:bold;margin-bottom:20rpx;}
            
        }
        .search-sticky{
            font-size:30rpx;
            .current{
                color:$deepCyan;font-weight:bold;font-size:34rpx;position: relative;
                .name{position: relative;z-index:2;}
                &::after{
                    content:'';position:absolute;left:50%;bottom:-20rpx;transform:translateX(-50%);z-index:1;width:32rpx;height:8rpx;background:$deepCyan;
                }
            }
        }
        .list{
            //padding-bottom:30rpx;background:#fff;
            border-top:1rpx solid $border-color;background:#fff;
            .tab{
                padding:30rpx;
                .tab-item{
                    width:144rpx;height:48rpx;line-height:48rpx;text-align:center;background:#F4F6FA;color:#979797;border-radius:32rpx;margin-right:30rpx;
                }
                .current{
                    background:#C7F8EF;color:$deepCyan;font-size:30rpx;
                    &::after{
                        display:none;
                    }
                }
            }
            .fly-card{margin: 0;
                .item{margin:0;}
                .content{
                    &::after{display: block;}
                }
            }
        }
    }
}

.page-wallet{
    &-index{
        .balance{
            color:#FFF;background:$deepCyan;padding:60rpx 0;text-align:center;
            .money{padding-top:10rpx;}
            .value{font-size:64rpx;}
        }
        .statistics{
            .font-bold{font-size:34rpx;}
            .grid-text{color:#999;font-size:26rpx;margin-top:20rpx;}
        }
        .desc{
            color:$grey9;background:#fff;padding:30rpx;margin-bottom:30rpx;line-height:42rpx;font-size:26rpx;
        }
    }
    &-withdraw{
        .form{
            padding:0 30rpx;background:#fff;
            .balance{padding:30rpx 0;}
        }
        .u-input{
            border-radius:72rpx;
        }
        .tips{
            margin-top:30rpx;line-height:48rpx;font-size:26rpx;
        }
    }
    &-withdraw-records{
        .unit{font-size:26rpx;}
        .price{font-size:34rpx;font-weight:bold;}
        .status-{
            &0{color:$blue;}
            &1{color:$deepCyan;}
            &2{color:$red;}
        }
    }
    &-preIncome{
        .search-sticky{
            .current{font-weight:normal;font-size:inherit;}
            .name{font-size:26rpx;}
        }
    }
}

.page-service{
    &-index{
        margin: 0 30rpx;
        .tips{padding:30rpx 0;line-height:48rpx;}
    }
}

.page-member{
    &-index{
        .card{
            padding:0 30rpx 30rpx;background:#fff;margin-bottom:30rpx;
            .card-item{
                border:4rpx solid $border-color;border-radius: 18rpx;text-align:center;padding:20rpx;
                .name{font-size:34rpx;}
                .price{font-size:60rpx;padding:30rpx 0;
                    .unit{font-size:24rpx;}
                }
                .days{font-size:26rpx;border-top:1rpx solid $border-color;padding-top:20rpx;margin-top:20rpx;}
                &.current{
                    color:$cyan;border-color:$cyan;
                }
            }
        }
        .fly-card{
            .header{
                background:#fff;padding:30rpx;
                .title{font-size:34rpx;font-weight:bold};
                .desc{color:$grey9;}
            }
            .item{
                .thumb{width:92rpx;height:92rpx;}
                .content{
                    position: relative;overflow:inherit;
                    &::after{bottom: -30rpx;left:0;width:100%;}
                }
                .desc{margin-top:10rpx;font-size:28rpx;}
            }
        }
    }
}

.show-agreement{
    .popup-block{
        margin:0 30rpx;
        .content{
            padding-top:30rpx;
        }
        .flex-around{
            padding:30rpx;
            .u-btn--default{
                width:180rpx;
            }
        }
    }
}

.img-layout{
    .u-list-image-wrap{
        display: flex;align-items:center;
    }
}